<template>
  <div id="app">
    <Header notab="member"/>
    <div class="contentWeb clear">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="detailCrumb">
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>预览简历</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="jianlicontent clear" id="creatGivePoster" ref="creatGivePoster">
        <div class="jianlitop clear">
          <div class="jianliLeft">
            <img :src="info.base_info.header || tx">
          </div>
          <div class="jianlicenter">
            <h2>{{info.base_info.name}}</h2>
            <div class="desc">
              <span>{{info.base_info.sex|checkedSex}}</span>
              <span>{{workyear(info.base_info.birthday)}}岁</span>
              <span style="max-width: initial">{{workyear(info.base_info.workYear)}}年工作经验</span>
              <!-- <span style="max-width: 300px;">现住{{info.base_info.liveAddress}}</span> -->
            </div>
            <div class="jianliis">
              <div class="spanr">
                {{findJobStatusList[info.base_info.findJobStatus]}}
              </div>
              <div class="spanrtel">
                {{info.base_info.mobileNo}}
              </div>
              <!-- <div class="spanremil">
                {{info.base_info.email}}
              </div> -->
            </div>
          </div>
          <!-- <el-button class="jianliright" icon="el-icon-download"
            @click="downloadPDF"
            :loading="downloading">下载简历</el-button> -->
          <div class="jianliright" @click="downloadPDF" v-if="!downloading">
            <img src="../../assets/img/xiazai.png"><span>下载简历</span>
          </div>
        </div>
        <div class="personTengt">
          <div class="yanses">
            <el-row>
              <el-col :span="12" v-if="info.experience.length > 0">
                <div class="jianliBt">最近工作</div>
                <el-row>
                  <el-col :span="4">
                    <span>职位：</span></el-col>
                  <el-col :span="19">{{info.experience[0].position}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">
                    <span>公司：</span></el-col>
                  <el-col :span="19">{{info.experience[0].companyName}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">
                    <span>行业：</span></el-col>
                  <el-col :span="19">{{info.experience[0].industry}}</el-col>
                </el-row>
              </el-col>
              <el-col :span="12" v-if="info.eduction.length > 0">
                <div class="jianliBt">最高学历/学位</div>
                <el-row>
                  <el-col :span="4">
                    <span>专业：</span></el-col>
                  <el-col :span="19">{{info.eduction[0].special}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">
                    <span>学校：</span></el-col>
                  <el-col :span="19">{{info.eduction[0].college}}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">
                    <span>学历/学位：</span></el-col>
                  <el-col :span="19">{{info.eduction[0].education}}</el-col>
                </el-row>
              </el-col>
            </el-row>
            <div class="jianliBt">个人信息</div>
            <el-row>
              <!-- <el-col :span="2">
                <span>微信：</span>
              </el-col>
              <el-col :span="10">
                <span style="min-width:10px; display:inline-block;">{{info.base_info.wechat}}</span>
              </el-col> -->
              <el-col :span="2">
                <span>户口/国籍：</span>
              </el-col>
              <el-col :span="10">{{info.base_info.householdRegister}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="2">
                <span>身高：</span>
              </el-col>
              <el-col :span="10">{{info.base_info.height == 0 ? '' : info.base_info.height}}cm</el-col>
              <el-col :span="2">
                <span>婚姻状态：</span>
              </el-col>
              <el-col :span="10">{{info.base_info.marryStatus|checkedMarryStatus}}</el-col>
            </el-row>
            <!-- <el-row>
              <el-col :span="2">
                <span>现住址：</span>
              </el-col>
              <el-col :span="10">{{info.base_info.liveAddress}}</el-col>
              <el-col :span="2" v-if="info.base_info.politicCountenance">
                <span>政治面貌：</span>
              </el-col>
              <el-col v-if="info.base_info.politicCountenance" :span="10">{{info.base_info.politicCountenance}}</el-col>
            </el-row>
            <el-row v-if="info.base_info.personalWeb">
              <el-col :span="2">
                <span>个人主页：</span>
              </el-col>
              <el-col :span="18">{{info.base_info.personalWeb}}</el-col>
            </el-row>
            <el-row>
              <el-col :span="2">
                <span>自我评价：</span>
              </el-col>
              <el-col :span="18">{{info.base_info.introduction}}</el-col>
            </el-row> -->
            <div class="jianliBt">目前年收入 {{info.base_info.currentYearWage}}万元 （包含基本工资、补贴、奖金、股权收益等）</div>
            <!-- <el-row>
              <el-col :span="2"><span>基本工资：</span></el-col>
              <el-col :span="6">{{info.base_info.baseWage}}万元</el-col>
              <el-col :span="2"><span>补助/津贴</span></el-col>
              <el-col :span="6">{{info.base_info.allowance}}万元</el-col>
              <el-col :span="2"><span>奖金/佣金</span></el-col>
              <el-col :span="6">{{info.base_info.bonus}}万元</el-col>
            </el-row> -->
            <div class="jianliBt">求职意向</div>
              <div class="jingyan" v-for="(item, index) in info.job_intention" :key="'j_'+index">
                <div class="mktitle clear">
                  <div class="mleft">
                    <span>{{item.workType}}</span>
                    <span>期望薪资：{{item.wageType}}{{item.startWage}} -{{item.endWage}}</span>
                  </div>
                </div>
                <div class="desc">
                  <span>地址：</span>
                  <span>{{item.workplace}}</span>
                </div>
                <div class="desc">
                  <span>职位：</span>
                  <span>{{item.position}}</span>
                </div>
              </div>
            </div>
          <div class="jianliBt">工作经验</div>
          <div class="jingyan" v-for="(item, index) in info.experience" :key="'w_'+index">
            <div class="mktitle clear">
              <div class="mleft">
                <span>{{item.startTime}} - {{item.endTime}}</span>
                <span>{{item.companyName}}</span>
                <span>{{item.position}}</span>
              </div>
            </div>
            <div class="desc">
              <span>{{item.nature}}</span>
              <span>{{item.industry}}</span>
              <span>{{item.companySize}}</span>
            </div>
            <div class="misoshu">
              <div class="lefts">工作描述</div>
              <div class="rights">{{item.workDescribe}}
              </div>
            </div>
          </div>
          <div class="jianliBt">项目经验</div>
          <div class="jingyan" v-for="(item, index) in info.project_experience" :key="'x_'+index">
            <div class="mktitle clear">
              <div class="mleft">
                <span>{{item.startDate}} - {{item.endDate}}</span>
                <span>{{item.name}}</span>
                <span>{{item.role}}</span>
              </div>
            </div>
            <div class="misoshu" style="margin-top: 20px;">
              <div class="lefts">项目描述</div>
              <div class="rights">{{item.projectDescribe}}
              </div>
            </div>
          </div>
          <div class="jianliBt">教育经历</div>
          <div class="jingyan" v-for="(item, index) in info.eduEntry" :key="'x_'+index">
            <div class="mktitle clear">
              <div class="mleft">
                <span>{{item.startTime}} - {{item.createTime}}</span>
                <span>{{item.college}}</span>
                <span>{{item.education}}</span>
              </div>
            </div>
            <div class="misoshu" style="margin-top: 20px;">
              <div class="lefts">主修课程</div>
              <div class="rights">{{item.special}}
              </div>
            </div>
          </div>
          <div class="jianliBt">在校情况</div>
          <div class="jingyan">
            <div class="mktitle clear">
              <div class="mleft" style="color: #8d8e9c">
                校内荣誉
              </div>
            </div>
            <div class="rongyu clear">
              <el-row style="margin: 20px 0;" v-for="(item, index) in info.honor" :key="'r_'+index">
                <el-col :span="3">{{item.time}}</el-col>
                <el-col :span="15"><b>{{item.honor}}</b></el-col>
                <el-col :span="6" style="color: #8d8e9c">{{item.level}}</el-col>
              </el-row>
            </div>
          </div>
          <div class="jingyan">
            <div class="mktitle clear">
              <div class="mleft" style="color: #8d8e9c">
                校内职务
              </div>
            </div>
            <div v-for="(item, index) in info.position" :key="'z_'+index">
              <div class="xiaotitle"><span>{{item.startTime}}-{{item.endTime}}</span><b>{{item.title}}</b></div>
              <div class="misoshu">
                <div class="lefts">工作描述</div>
                <div class="rights">{{item.workDescribe}}
                </div>
              </div>
            </div>
          </div>
          <div class="jianliBt">技能特长</div>
          <div class="jingyan">
            <div class="mktitle clear">
              <div class="mleft" style="color: #8d8e9c">
                技能/语言/兴趣
              </div>
            </div>
            <div class="rongyu clear">
              <el-row style="margin: 20px 0;" v-for="(item, index) in info.skill" :key="'j_'+index">
                <el-col :span="6">{{item.skillName}}</el-col>
                <el-col :span="18"><b>{{item.level}}</b></el-col>

              </el-row>
            </div>
          </div>
          <div class="jingyan">
            <div class="mktitle clear">
              <div class="mleft" style="color: #8d8e9c">
                证书
              </div>
            </div>
            <div class="rongyu clear">
              <el-row style="margin: 20px 0;" v-for="(item, index) in info.certificate" :key="'s_'+index">
                <el-col :span="4">{{item.time}}</el-col>
                <el-col :span="20"><b>{{item.title}}</b></el-col>

              </el-row>
            </div>
          </div>
          <div class="jingyan">
            <div class="mktitle clear">
              <div class="mleft" style="color: #8d8e9c">
                培训经历
              </div>
            </div>
            <div v-for="(item,i) in info.training" :key="'p_'+i">
              <div class="xiaotitle"><span>{{item.startTime}}-{{item.endTime}}</span><b>{{item.title}}</b><span
                style="color: #999">{{item.companyName}}</span>
              </div>
              <div class="misoshu">
                <div class="lefts">培训内容</div>
                <div class="rights">{{item.trainingContent}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import mt from '../../assets/img/mt.png'
import Header from '../../components/header'
import Footer from '../../components/footer'
import { findJobStatus, marryStatus, myCv, dengji, GetUrlParam, WatchPersonal, sexlist } from '../../assets/js/domains'
import tx from '../../assets/img/default.jpg'

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  name: 'MemLook',
  filters: {
    checkedMarryStatus (val) {
      switch (val) {
        case 1:
          return marryStatus['1']
        case 2:
          return marryStatus['2']
        case 3:
          return marryStatus['3']
        default:
          return marryStatus['1']
      }
    },
    checkedSex (val) {
      return sexlist[val] || sexlist['1']
    }
  },
  components: {
    Header,
    Footer
  },
  directives: {},
  data: function () {
    return {
      tx: tx,
      findJobStatusList: findJobStatus,
      marryStatusList: marryStatus,
      dengjiList: dengji,
      info: {
        base_info: {},
        job_intention: {},
        experience: [],
        eduction: [],
        project_experience: [],
        position: [],
        training: [],
        honor: [],
        skill: [],
        certificate: []
      },
      userUid: '',
      mt: mt,
      downloading: false
    }
  },
  created: function () {
    document.title = '简历预览'
    this.userUid = GetUrlParam('id') ? GetUrlParam('id') : localStorage.getItem('md_user_uid')
  },
  computed: {},
  mounted: function () {
    this.getpost()
  },
  methods: {
    dateDiff: function (date1, type) {
      date1 = new Date(date1).getTime()
      var date2 = new Date().getTime()
      type = type || 'hour'
      var diffValue = Math.abs(date2 - date1)
      var second = 1000
      var minute = second * 60
      var hour = minute * 60
      var day = hour * 24
      var month = day * 30
      var year = month * 12
      var timeType = {
        second: second,
        minute: minute,
        hour: hour,
        day: day,
        month: month,
        year: year
      }

      return Math.ceil(diffValue / timeType[type])
    },
    workyear: function (btime) {
      return this.dateDiff(btime, 'year')
    },
    getpost: function () {
      const _this = this
      myCv({
        user_uid: this.userUid
      }).then(function (res) {
        if (res.code === 200) {
          res.data.job_intention = res.data.job_intention ? res.data.job_intention : {}
          _this.info = res.data
          _this.WatchPersonal()
        } else {
          _this.$alert(res.msg, '提示')
        }
      })
    },
    WatchPersonal: function () {
      const params = {
        enterpriseUid: localStorage.getItem('md_enterpriseUid'),
        userUid: this.info.base_info.userUid,
        enterpriseName: '',
        industry: '',
        enterpriseNature: '',
        companySize: ''
      }
      WatchPersonal(params).then(function (res) {
        console.log(res)
      })
    },
    downloadPDF: function () {
      var title = this.info.base_info.name + '简历'
      this.downloading = true
      var _this = this
      this.$nextTick(function () {
        html2Canvas(this.$refs.creatGivePoster, { useCORS: true }).then(function (canvas) {
          const contentWidth = canvas.width
          const contentHeight = canvas.height
          const pageHeight = contentWidth / 592.28 * 841.89
          let leftHeight = contentHeight
          let position = 0
          const imgWidth = 595.28
          const imgHeight = 592.28 / contentWidth * contentHeight
          const pageData = canvas.toDataURL('image/jpeg', 1.0)
          const PDF = new JsPDF('', 'pt', 'a4')
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
          } else {
            while (leftHeight > 0) {
              PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
              leftHeight -= pageHeight
              position -= 841.89
              if (leftHeight > 0) {
                PDF.addPage()
              }
            }
          }
          PDF.save(title + '.pdf')
          _this.downloading = false
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/member";
</style>
